<template>
  <div class="layout-demo">
    <div class="demo-header">
      <h1>响应式布局演示</h1>
      <p>展示聊天界面在不同设备和屏幕尺寸下的布局表现</p>
    </div>

    <div class="demo-controls">
      <div class="control-group">
        <label>设备模拟:</label>
        <div class="device-buttons">
          <button 
            v-for="device in devices" 
            :key="device.name"
            @click="setDevice(device)"
            :class="['device-btn', { active: currentDevice.name === device.name }]"
          >
            <i :class="device.icon"></i>
            <span>{{ device.name }}</span>
          </button>
        </div>
      </div>

      <div class="control-group">
        <label>主题:</label>
        <select v-model="selectedTheme" @change="changeTheme">
          <option value="light">浅色主题</option>
          <option value="dark">深色主题</option>
          <option value="auto">跟随系统</option>
        </select>
      </div>

      <div class="control-group">
        <label>密度:</label>
        <select v-model="selectedDensity" @change="changeDensity">
          <option value="compact">紧凑</option>
          <option value="normal">正常</option>
          <option value="comfortable">舒适</option>
        </select>
      </div>
    </div>

    <div class="demo-viewport" :style="viewportStyle">
      <div class="viewport-frame">
        <div class="frame-header">
          <span class="frame-title">{{ currentDevice.name }} - {{ currentDevice.width }}x{{ currentDevice.height }}</span>
          <div class="frame-controls">
            <button @click="toggleFullscreen" class="frame-btn">
              <i :class="isFullscreen ? 'icon-minimize' : 'icon-maximize'"></i>
            </button>
          </div>
        </div>
        
        <div class="frame-content">
          <iframe 
            ref="demoFrame"
            src="/chat"
            :style="frameStyle"
            frameborder="0"
          ></iframe>
        </div>
      </div>
    </div>

    <div class="demo-info">
      <div class="info-section">
        <h3>当前设备信息</h3>
        <ul>
          <li><strong>设备:</strong> {{ currentDevice.name }}</li>
          <li><strong>分辨率:</strong> {{ currentDevice.width }} x {{ currentDevice.height }}</li>
          <li><strong>断点:</strong> {{ currentBreakpoint }}</li>
          <li><strong>布局模式:</strong> {{ layoutMode }}</li>
        </ul>
      </div>

      <div class="info-section">
        <h3>布局特性</h3>
        <ul>
          <li v-for="feature in layoutFeatures" :key="feature" class="feature-item">
            <i class="icon-check"></i>
            <span>{{ feature }}</span>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { useUIStore } from '@/stores/ui'

const uiStore = useUIStore()

// 设备预设
const devices = [
  { name: '手机', width: 375, height: 667, icon: 'icon-mobile' },
  { name: '平板', width: 768, height: 1024, icon: 'icon-tablet' },
  { name: '笔记本', width: 1366, height: 768, icon: 'icon-laptop' },
  { name: '桌面', width: 1920, height: 1080, icon: 'icon-desktop' }
]

const currentDevice = ref(devices[2]) // 默认笔记本
const selectedTheme = ref(uiStore.theme)
const selectedDensity = ref('normal')
const isFullscreen = ref(false)
const demoFrame = ref<HTMLIFrameElement>()

// 计算属性
const viewportStyle = computed(() => ({
  width: isFullscreen.value ? '100%' : `${currentDevice.value.width + 40}px`,
  height: isFullscreen.value ? '100vh' : `${currentDevice.value.height + 80}px`
}))

const frameStyle = computed(() => ({
  width: `${currentDevice.value.width}px`,
  height: `${currentDevice.value.height}px`,
  transform: isFullscreen.value ? 'scale(1)' : 'scale(0.8)',
  transformOrigin: 'top left'
}))

const currentBreakpoint = computed(() => {
  const width = currentDevice.value.width
  if (width < 640) return 'xs'
  if (width < 768) return 'sm'
  if (width < 1024) return 'md'
  if (width < 1280) return 'lg'
  if (width < 1536) return 'xl'
  return '2xl'
})

const layoutMode = computed(() => {
  const width = currentDevice.value.width
  if (width < 768) return '移动端单栏'
  if (width < 1024) return '平板端双栏'
  return '桌面端三栏'
})

const layoutFeatures = computed(() => {
  const width = currentDevice.value.width
  const features = []
  
  if (width >= 1024) {
    features.push('显示侧边栏', '显示聊天标签', '显示客户信息栏')
  } else if (width >= 768) {
    features.push('显示侧边栏', '显示聊天标签', '隐藏客户信息栏')
  } else {
    features.push('隐藏侧边栏', '全屏聊天区域', '抽屉式导航')
  }
  
  features.push('响应式字体大小', '触摸友好的交互', '自适应间距')
  
  return features
})

// 方法
const setDevice = (device: typeof devices[0]) => {
  currentDevice.value = device
}

const changeTheme = () => {
  uiStore.setTheme(selectedTheme.value as any)
}

const changeDensity = () => {
  // 这里可以设置密度
  console.log('密度变更:', selectedDensity.value)
}

const toggleFullscreen = () => {
  isFullscreen.value = !isFullscreen.value
}

onMounted(() => {
  // 初始化主题
  selectedTheme.value = uiStore.theme
})
</script>

<style scoped>
.layout-demo {
  padding: var(--spacing-xl);
  max-width: 1400px;
  margin: 0 auto;
}

.demo-header {
  text-align: center;
  margin-bottom: var(--spacing-xl);
}

.demo-header h1 {
  margin-bottom: var(--spacing-md);
  font-size: var(--font-size-2xl);
  color: var(--color-text);
}

.demo-header p {
  color: var(--color-text-secondary);
  font-size: var(--font-size-lg);
}

.demo-controls {
  display: flex;
  gap: var(--spacing-xl);
  margin-bottom: var(--spacing-xl);
  padding: var(--spacing-lg);
  background: var(--color-surface);
  border-radius: var(--border-radius-lg);
  border: 1px solid var(--color-border);
  flex-wrap: wrap;
}

.control-group {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.control-group label {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
}

.device-buttons {
  display: flex;
  gap: var(--spacing-sm);
}

.device-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-xs);
  padding: var(--spacing-md);
  background: var(--color-background);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-md);
  cursor: pointer;
  transition: all var(--transition-fast);
  min-width: 80px;
}

.device-btn:hover {
  background: var(--color-hover);
  border-color: var(--color-primary);
}

.device-btn.active {
  background: var(--color-primary);
  color: var(--color-text-inverse);
  border-color: var(--color-primary);
}

.device-btn i {
  font-size: 20px;
}

.device-btn span {
  font-size: var(--font-size-xs);
}

select {
  padding: var(--spacing-sm) var(--spacing-md);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-md);
  background: var(--color-background);
  color: var(--color-text);
  font-size: var(--font-size-sm);
}

.demo-viewport {
  display: flex;
  justify-content: center;
  margin-bottom: var(--spacing-xl);
  transition: all var(--transition-normal);
}

.viewport-frame {
  background: var(--color-surface);
  border-radius: var(--border-radius-lg);
  box-shadow: var(--shadow-xl);
  overflow: hidden;
  border: 1px solid var(--color-border);
}

.frame-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-md) var(--spacing-lg);
  background: var(--color-background);
  border-bottom: 1px solid var(--color-border);
}

.frame-title {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
}

.frame-controls {
  display: flex;
  gap: var(--spacing-sm);
}

.frame-btn {
  width: 24px;
  height: 24px;
  border: none;
  background: transparent;
  color: var(--color-text-secondary);
  cursor: pointer;
  border-radius: var(--border-radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-fast);
}

.frame-btn:hover {
  background: var(--color-hover);
  color: var(--color-text);
}

.frame-content {
  overflow: hidden;
}

.demo-info {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--spacing-xl);
}

.info-section {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-lg);
  padding: var(--spacing-lg);
}

.info-section h3 {
  margin-bottom: var(--spacing-md);
  font-size: var(--font-size-lg);
  color: var(--color-text);
}

.info-section ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.info-section li {
  padding: var(--spacing-sm) 0;
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
}

.feature-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.feature-item i {
  color: var(--color-success);
}

/* 图标样式 */
.icon-mobile::before { content: '📱'; }
.icon-tablet::before { content: '📱'; }
.icon-laptop::before { content: '💻'; }
.icon-desktop::before { content: '🖥️'; }
.icon-maximize::before { content: '⛶'; }
.icon-minimize::before { content: '⊟'; }
.icon-check::before { content: '✓'; }

/* 响应式设计 */
@media (max-width: 768px) {
  .layout-demo {
    padding: var(--spacing-lg);
  }
  
  .demo-controls {
    flex-direction: column;
  }
  
  .device-buttons {
    flex-wrap: wrap;
  }
  
  .demo-info {
    grid-template-columns: 1fr;
  }
}
</style>